<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <meta name="generator" content="Hugo 0.98.0" />

  
  <meta name="description" content="走在通往幸福的路上">
  

  
  <link rel="apple-touch-icon" sizes="180x180" href="https://blog.v5u.win/apple-touch-icon.png">

  
  <link rel="icon" type="image/png" sizes="32x32" href="https://blog.v5u.win/favicon-32x32.png">

  
  <link rel="icon" type="image/png" sizes="16x16" href="https://blog.v5u.win/favicon-16x16.png">

  
  <link rel="manifest" href="https://blog.v5u.win/site.webmanifest">

  
  <link rel="mask-icon" href="https://blog.v5u.win/safari-pinned-tab.svg" color="">

  <meta name="msapplication-TileColor" content="">

  <meta name="theme-color" content="">

  
  <link rel="stylesheet" href="https://blog.v5u.win/css/bootstrap.min.css" />

  
  <title>HTML&amp;CSS | 为吾优</title>
  

  <style>
body {
  min-width: 300px;
}

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

.custom-navbar a {
  display: inline-block; 
  padding: 18px 0;
  margin-right: 1em; 
  font-weight: bold; 
}

.custom-navbar a:hover,
.custom-navbar a:focus {
  text-decoration: none; 
}

@media print {
  .custom-navbar {
    display: none;
  }
}

article {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
}


body {
  background-color: #fff;
}



body {
  color: #212529;
}



a {
  color: #007bff;
}



a:hover,
a:focus {
  color: #0056b3;
}



.custom-navbar {
  background-color: #212529;
}



.custom-navbar a {
  color: rgba(255,255,255,.75);
}



.custom-navbar a:hover,
.custom-navbar a:focus {
  color: rgba(255,255,255,1);
}



.container {
  max-width: 800px;
}





</style>
</head>

<body>
  <nav class="custom-navbar">
  <div class="container">
    
    <a href="/">文章</a>
    
    <a href="/tags/">标签</a>
    
    <a href="/about/">关于</a>
    
    <a href="/index.xml">RSS</a>
    
  </div>
</nav>
  
  <div class="container">
    <article>
      <h1>HTML&amp;CSS</h1>
<p>&lt;p&gt; paragragh 段落</p>
<p>&lt;em&gt; emphasize 强调(显示为斜体)</p>
<p>&lt;span&gt; 样式</p>
<p>&lt;q&gt; quote [kwot] 引用，引号(显示默认添加双引号，故不用再次添加“ ”)</p>
<p>&lt;blockquote&gt; 引用块 ，长文本引用(显示默认为缩进，左右都缩进)</p>
<p>&lt;br /&gt; break 换行 &amp;nbsp; 空格占位符</p>
<p>&lt;hr /&gt; horizontal rule 水平分割线</p>
<p>&lt;address&gt; 地址标签(默认显示为斜体)</p>
<p>&lt;code&gt; 一行代码</p>
<p>&lt;pre&gt; predefined 预定义，多行代码,预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.</p>
<p>&lt;ul&gt; unordered list 定义无序列表 (前方显示一个小圆点)</p>
<p>&lt;li&gt; list 列表</p>
<p>&lt;ol&gt; orderly list 定义有序列表 (前方显示123等数字)</p>
<p>创建表格的四个元素：table、tbody、tr、th、td</p>
<p>&lt;tbody&gt; table body 表格体</p>
<p>&lt;tr&gt; table row 表格，行</p>
<p>&lt;td&gt; table data 表格数据</p>
<p>&lt;th&gt; table head 表格头</p>
<p>&lt;caption&gt; 表格标题</p>
<p>&lt;table summary=&quot;表格简介文本&quot;&gt;</p>
<p><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->&lt;a&gt; action 目标 ，添加超链接 例: &lt;a href=&quot;目标网址&quot; title=&quot;鼠标滑过显示的文本&quot;&gt;链接显示的文本&lt;/a&gt;<!-- raw HTML omitted --></p>
<!-- raw HTML omitted -->
<p><!-- raw HTML omitted --> rel 属性用于指定当前文档与被链接文档的关系 relative 相对关系<!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->&lt;span id=&quot;setGreen&quot;&gt;公开课&lt;/span&gt;<!-- raw HTML omitted --></p>
<p>#setGreen{</p>
<p>   color:green;</p>
<p>}</p>
<p><!-- raw HTML omitted -->CSS id选择器<!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->.类选器名称{css样式代码;}<!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->注意：<!-- raw HTML omitted --></p>
<p>1、英文圆点开头</p>
<p>2、其中类选器名称可以任意起名</p>
<p>&lt;span id=&quot;setGreen&quot;&gt;公开课&lt;/span&gt; </p>
<!-- raw HTML omitted -->
<p><!-- raw HTML omitted -->.food&gt;li{border:1px solid red;}<!-- raw HTML omitted --> <!-- raw HTML omitted -->大于符号(&gt;),用于选择指定标签元素的第一代子元素。<!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->solid：表示单线<!-- raw HTML omitted --></p>
<!-- raw HTML omitted -->
<p><!-- raw HTML omitted -->包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：<!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted -->.first  span{color:red;}<!-- raw HTML omitted --></p>
<!-- raw HTML omitted -->
<p><!-- raw HTML omitted -->伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式 🅰️hover{color:red;}<!-- raw HTML omitted --></p>
<p>上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。</p>
<p><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted -->分组选择符：h1,span{color:red;}<!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<p><!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted -->它相当于下面两行代码：<!-- raw HTML omitted --><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
<p>h1{color:red;} span{color:red;}</p>

    </article>
  </div>

  
  
  

  
</body>

</html>